<template>
  <section style="margin: 0 100px;">
    <el-row :gutter="10" class="header_top">
      <el-col :span="3">
        <img width="300" src="../assets/logo.png" />
      </el-col>
      <el-col :span="20">
        <el-input placeholder="请输入电影名称" v-model="searchCon" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="searchName"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-row class="menu_list" :gutter="1">
      <el-col :span="1" v-for="(item,index) in menuList" :key="index" style="margin-left: 32px;">
        <a v-if="item.id == id" style="color: #d88930;" @click="toVideoList(item.id, item.type_name)">{{item.type_name}}</a>
        <a v-else @click="toVideoList(item.id, item.type_name)">{{item.type_name}}</a>
      </el-col>
    </el-row>
  </section>
</template>

<script>
    import {getAllTypeList} from "../axios/api"
    export default {
        name: "index-header",
        data(){
            return{
                searchCon: '',
                menuList: [

                ],
                id: 0
            };
        },
        mounted:function(){
            this.getAllTypeList();
            if(this.getUrlKey("id")){
                this.id = this.getUrlKey("id")
            }
        },
        methods:{
            getAllTypeList:async function () {
                let res = await getAllTypeList();
                this.menuList = res.msg;
                this.menuList.unshift({
                    id: 0,
                    type_name: "首页"
                })
            },
            setTitle: function(id){
                this.id = id;
            },
            toVideoList:function (id, title) {
                this.id = id;
                if(id == 0){
                    this.$router.push({ path:'/home'})
                    return
                }
                this.$router.push({ path:'/videoList?id='+id})
                this.$emit('switchTap');
                document.title = title;
            },
            searchName:function () {
                this.$router.push({ path:'/videoList?name='+this.searchCon})
                this.$emit('search');
                document.title = this.searchCon;
            }
        }
    }
</script>

<style scoped>
  a{
    color: #fff;
    transition: 0.6s;
    cursor:pointer;
  }
  a:hover{
    color: #d88930;
  }
  .menu_list{
    line-height: 41px;
  }
  .header_top{
    padding: 30px;
  }
  .input-with-select{
    width: 400px;
    background-color: #0000;
    margin-top: 8px;
    float: right;
    margin-right: -30px;
  }
</style>
